<template>
  <a-card :bordered="false"
   class="product-controll-card">
   <CrudTable
     :columns="columns"
     :fetchData="fetchData"
     :searchForm="searchForm">

      <template #createTimeSlot="{ data }">
        <a-range-picker show-time v-model="data.createTime" allow-clear/>
      </template>
      <template #searchIDSlot="{ data }">
        <a-input v-model="data.id" placeholder="请输入ID" allow-clear/>
      </template>

      <template #nicknameSlot="{ data }">
        <a-input v-model="data.name" placeholder="请输入客户经理" allow-clear/>
      </template>

      <template #pushPlanSlot="{ data }">
        <a-input v-model="data.plan_name" placeholder="请输入推送计划" allow-clear/>
      </template>

   </CrudTable>
 
 </a-card>  
 </template>
 
 <script setup lang="ts">
 import { ref , reactive } from 'vue'
 import dayjs from 'dayjs';
 import { isUndefined, isNull } from 'lodash';
 import {  getPersonneStatistics } from '@/api/financialStatistics'
 import { getCurrentDate, getCurrentNextDayDate } from '@/utils/dateUtil';
 let starTime = getCurrentDate()
 let endTime = getCurrentNextDayDate();
 
 let searchForm = ref([
    { 
      field: 'createTime', 
      span: 6, 
      slots: {
        default: 'createTimeSlot'
      },
      defaultValue: [
        `${starTime}`, 
        `${endTime}`
      ],
    },
    { 
      field: 'id', 
      title: 'ID', 
      span: 4, 
      slots: {
        default: 'searchIDSlot'
      } 
    },
    { 
      field: 'name', 
      title: '客户经理', 
      span: 4, 
      slots: {
        default: 'nicknameSlot'
      } 
    },
    { 
      field: 'plan_name', 
      title: '推送计划', 
      span: 4, 
      slots: {
        default: 'pushPlanSlot'
      } 
    }
])


 const columns = [
   {
     title: '日期',
     dataIndex: 'date',
     align: 'center'
   },
   {
     title: 'ID',
     dataIndex: 'uid',
     align: 'center'
   },
   {
     title: '客户经理',
     dataIndex: 'nickname',
     align: 'center'
   },
   {
     title: '推送计划',
     align: 'center',
     dataIndex: 'plan_name',
   },
   {
     title: '进件数量',
     align: 'center',
     dataIndex: 'clue_count',
   }
 ];
 
 const fetchData = ({ page, size, query }): any =>{
  let start_time: string = '';
   let end_time: string = '';
   const { createTime, name, plan_name, id } = query;
   if(!isUndefined(createTime) && !isNull(createTime)){
      let [startTime, endTime ] = createTime;
      start_time = String(dayjs(startTime).valueOf() / 1000);
      end_time = String(dayjs(endTime).valueOf() / 1000);
   }

   return getPersonneStatistics({
       page, size, 
       start_time,
       end_time, name,
       plan_name, id
   }).then(({ data })=>{
     let total = data?.listpage?.total;
     let dataList = data?.listpage.data;
     return { data: dataList , total }
   })
 }
 
 
 </script>
 
 <style scoped lang='less'>
 
 </style>